안녕하세요, 소플입니다.

지난 10월 21일, Next.js Conf 2025를 앞두고 Next.js 16이 정식으로 릴리즈되었습니다.

이번 매거진에서는 따끈따끈한 Next.js 16에 대해 한 번 살펴보도록 하겠습니다.

---

Next.js 16 주요 업데이트 내용 ✨

Cache Components

Next.js 16에서 가장 큰 변화는 바로 컴포넌트 캐싱입니다.

새로운 "use cache" 지시어를 통해 페이지, 컴포넌트, 함수 단위의 명시적인 캐싱을 지원합니다.

이전 버전의 App Router에서 제공하던 암묵적 캐싱 대신 옵트인 방식으로 변경된 것입니다.

예상치 못한 캐싱을 방지하기 위해 기본값은 동적 실행이며, 모든 동적 코드가 요청 시 실행됩니다.

컴포넌트 캐싱을 통해 부분 사전 렌더링(Partial Pre-Rendering, PPR) 개념이 완성된 것이죠.

즉, 정적 또는 동적 렌더링 양자택일이 아닌 중간 형태를 지원합니다.

컴포넌트 캐싱을 활성화하려면 아래와 같이 next.config.ts에서 cacheComponents 옵션을 true로 설정해주면 됩니다.

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

설정 자체는 굉장히 간단하죠?

하지만 이번에 도입된 "use cache" 지시어와 관련해서 개발자 커뮤니티에서는 "use client", "use server", "use memo" 등 지시어가 너무 많아져서 혼란스럽다는 의견도 나오고 있습니다.

지시어가 많아진만큼, 앞으로 각 지시어를 사용할 때는 그 역할을 명확하게 이해하고 사용하는 것이 중요할 것 같습니다.

💡 베타 릴리스에서 이미 발표한 바와 같이, 이전의 실험적 experimental.ppr 플래그와 구성 옵션은 제거되고, Cache Components 구성으로 통합된다고 합니다.

Next.js Devtools MCP

AI를 사용해서 코드를 작성할 때 가장 중요한 것은 AI에게 컨텍스트를 잘 제공하는 것이죠.

만약 AI 에이전트 사용해서 Next.js 애플리케이션을 개발하고 있다면,

현재 개발 중인 Next.js 애플리케이션의 상태를 명확하게 AI 에이전트에게 전달하는 것이 매우 중요합니다.

이를 위해 Next.js 16에서는 Model Context Protocol(MCP)를 통합하여 AI 지원 디버깅을 제공합니다.

Next.js Devtools MCP를 통해 Next.js의 라우팅/캐싱/렌더링 동작, 통합 로그, 스택 트레이스, 현재 라우트 등의 컨텍스트를 AI 에이전트에게 제공할 수 있습니다.

아래와 같이 .mcp.json 파일을 프로젝트 루트에 추가함으로써 Next.js Devtools MCP를 설정할 수 있습니다.

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

이렇게 하면 AI 에이전트가 문제를 진단하고, 설명 및 수정 제안까지 명확하게 하도록 만들 수 있는 것이죠.

Next.js Devtools MCP에 대한 더 자세한 내용이 궁금한 분들은 아래 링크를 참고하시기 바랍니다.

🔗 Next.js Devtools MCP 공식 문서
https://nextjs.org/docs/app/guides/mcp

proxy.ts (기존 middleware.ts)

Next.js 16에서는 기존의 middleware.ts가 proxy.ts로 변경되었습니다.

이는 네트워크 경계를 더 명확히 하기 위한 조치라고 합니다.

Edge 런타임에서 실행되던 기존의 middleware.ts와 달리, proxy.ts는 Node.js 런타임에서 실행됩니다.

요청 인터셉트 로직은 동일하게 유지하면서 이름만 변경되었다고 합니다.

그래서 마이그레이션을 위해서는 기존 middleware.ts 파일명을 proxy.ts로 변경하고,

export하는 함수명을 아래와 같이 proxy로 변경하기만 하면 됩니다.

// proxy.ts
export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

⚠️ 주의: middleware.ts 파일은 Edge 런타임 용도로 아직 남아 있으나, 향후 제거될 예정이라고 합니다.

로깅 개선

Next.js 16의 마지막 주요 변경사항은 로깅 개선입니다.

아래 그림과 같이 개발 모드에서 어디서 시간이 많이 소요되는지 한눈에 파악할 수 있도록 개선되었다고 합니다.

그리고 빌드 과정의 각 단계별 소요 시간도 아래와 같이 상세히 출력된다고 합니다.

앞으로는 이러한 자세한 로그를 통해 병목 지점을 쉽게 파악하고 최적화할 수 있게 될 것 같습니다.

   ▲ Next.js 16 (Turbopack)
 
 ✓ Compiled successfully in 615ms
 ✓ Finished TypeScript in 1114ms
 ✓ Collecting page data in 208ms
 ✓ Generating static pages in 239ms
 ✓ Finalizing page optimization in 5ms

---

기존 베타에서 안정화 및 개선된 사항 🚀

지금부터는 기존의 Next.js 16 베타 버전에서 안정화되거나 개선된 사항들에 대해 간략히 살펴보도록 하겠습니다.

Turbopack (안정화)

드디어 Turbopack이 Next.js 프로젝트의 기본 번들러가 되었습니다!

Turbopack을 사용하면 Webpack에 비해 개발 중 Fast Refresh는 최대 10배 빠르고, 프로덕션 빌드는 2-5배 빨라진다고 합니다.

만약 Webpack을 계속 사용하고 싶다면, 아래와 같이 --webpack 옵션을 사용하면 됩니다.

next dev --webpack
next build --webpack

Turbopack 파일시스템 캐싱 (beta)

Turbopack 파일시스템 캐싱은 개발 모드일 때 컴파일 아티팩트를 디스크에 저장해둠으로써,

애플리케이션 재시작 시 컴파일 시간을 대폭 단축시킬 수 있는 기능입니다.

이 기능은 특히 대규모 저장소에서 큰 효과를 발휘합니다.

파일시스템 캐싱을 활성화 하기 위해서는 아래와 같이 next.config.ts에서 turbopackFileSystemCacheForDev 옵션을 true로 설정해주면 됩니다.

// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};
 
export default nextConfig;

단순화된 create-next-app

create-next-app의 기본 템플릿이 App Router 사용, TypeScript 우선, Tailwind CSS 및 ESLint 포함으로 업데이트되었다고 합니다.

Build Adapters API (alpha)

이제 빌드 프로세스에 커스텀 어댑터를 연결할 수 있는 Build Adapters API가 알파 버전으로 제공됩니다.

참고로 이 기능은 Next.js가 Vercel에만 제대로 배포가 가능하다는 개발자들의 불만을 해결하기 위해서 과거부터 요구되어 왔던 기능입니다.

Build Adapters를 사용하면 빌드 프로세스에 연결되는 커스텀 어댑터를 생성할 수 있으며,

이를 통해 배포 플랫폼이나 커스텀 빌드 워크플로우가 Next.js 설정을 수정하거나 빌드 출력을 처리할 수 있습니다.

// next.config.js
const nextConfig = {
  experimental: {
    adapterPath: require.resolve('./my-adapter.js'),
  },
};
 
module.exports = nextConfig;

아직은 알파 버전이기 때문에 여러가지 한계가 있을 수는 있지만,

향후 Next.js의 배포 유연성을 크게 높여줄 수 있는 기능이 될 것으로 기대됩니다.

React Compiler 지원 (안정화)

지난 React Conf 2025 (Day 1) 매거진에서 다뤘던 것처럼, 얼마 전 React Compiler 1.0이 정식으로 릴리즈 되었습니다.

참고로 React Compiler는 컴포넌트를 자동으로 메모이제이션하여, 수동 코드 변경 없이 불필요한 재렌더링을 줄여주는 역할을 합니다.

Next.js 16에서는 React Compiler에 대한 내장 지원이 정식으로 안정화되었다고 합니다.

React Compiler를 활성화하려면, 아래와 같이 next.config.ts에 reactCompiler 옵션을 true로 설정하고 Babel 플러그인을 설치하면 됩니다.

const nextConfig = {
  reactCompiler: true,
};
 
export default nextConfig;

npm install babel-plugin-react-compiler@latest

⚠️ React Compiler가 Babel에 의존하기 때문에, reactCompiler 옵션을 활성화하면 개발 모드와 빌드 시 컴파일 시간이 더 길어질 수 있습니다.

---

핵심 아키텍처 및 기능 개선 🏗

다음으로는 Next.js 16에서 핵심 아키텍처 및 기능들이 어떻게 개선되었는지 간단하게 요약해서 살펴보도록 하겠습니다.

향상된 라우팅 및 내비게이션

• 레이아웃 중복 제거(Layout deduplication)
  • 동일 레이아웃을 공유하는 여러 링크를 프리페칭할 때 레이아웃이 한 번만 다운로드 됨
• 증분 프리페칭(Incremental prefetching)
  • 이미 캐시된 부분은 재요청하지 않고, 뷰포트를 떠나면 요청을 취소하거나 우선순위를 조정하는 등 세밀한 제어가 가능
• 개발자는 코드 수정 없이 성능 향상 효과를 누릴 수 있게 설계됨

개선된 캐싱 API

• revalidateTag() API 업데이트
  • revalidateTag(tag, profile) 형태로 바뀌어, stale-while-revalidate(SWR) 동작을 지원
• updateTag(tag) API 추가
  • Server Actions 내에서 캐시를 바로 만료하고 최신 데이터를 즉시 반영 가능
• refresh() API 추가
  • Server Action을 수행한 후, 페이지의 다른 위치에 표시된 캐시되지 않은 데이터를 새로고침해야 할 때 사용
  • 캐시된 내용에는 영향을 주지 않으면서 동적 데이터만 갱신 가능
  • 클라이언트 측의 router.refresh()를 보완하는 역할

React 19.2 및 Canary 기능 지원

Next.js 16의 App Router에는 React Canary 릴리즈가 통합되어 있음.

• View Transitions
  • 네비게이션 또는 업데이트 시 UI 애니메이션 지원
• useEffectEvent()
  • Effects 내부의 비-리액티브 로직을 추출해 재사용 가능
• <Activity/>
  • UI를 숨기고 상태를 유지하며 백그라운드 작업을 렌더링할 수 있는 컴포넌트

---

Next.js 16 업그레이드 방법 🛠

Next.js 16으로 업그레이드 하려면 아래 명령어를 사용하면 됩니다.

# 자동 업그레이드
npx @next/codemod@canary upgrade latest
 
# 수동 업그레이드
npm install next@latest react@latest react-dom@latest
 
# 신규 프로젝트 생성
npx create-next-app@latest

---

마치며

지금까지 Next.js 16의 주요 업데이트 내용에 대해 살펴보았습니다.

많은 새로운 기능들과 개선 사항들이 포함되어 있기 때문에,

개발자들 입장에서는 더 공부하고 적용해야할 것들이 많아진 것도 사실입니다.

하지만 이러한 변화들이 장기적으로는 더 나은 개발 경험과 성능 향상으로 이어질 것이라고 생각합니다.

저도 얼른 개발 중인 프로젝트에 Next.js 16의 새로운 기능들을 하나씩 적용해봐야겠네요ㅎㅎ

---

🔗 참고 링크

• https://nextjs.org/blog/next-16
• https://github.com/vercel/next.js

---

이번 매거진에서는 Next.js 16에 대해 알아보았습니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀